<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Home</title>
	<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/css/order.css" />
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script type="text/javascript">
		var maxtime = [[${maxtime}]];
		function CountDown() {
			if (maxtime >= 0) {
				minutes = Math.floor(maxtime / 60);
				seconds = Math.floor(maxtime % 60);
				$(".minute").html(minutes);
				$(".second").html(seconds);
				--maxtime;
			} else {
				alert("订单超时未支付,系统已自动取消订单");
				clearInterval(timer);
			}
		}
		timer = setInterval("CountDown()", 1000);
		//JSON.parse()
		var seats=[[${order.selectedSets}]];
		$(function(){
			var content="";
			for(var i=0;i<seats.length;i++){
				content+="<span class='seatinfo'><i>"+(seats[i][0]+1)+"</i>排<i>"+(seats[i][1]+1)+"</i>座</span>"
			}
			$("#seats").html(content);
		});
	</script>
</head>
<body>
	<!-- header -->
	<div class="header">
		<div class="top_bg">
			<div class="container">
				<div class="header_top">
					<div class="logo">
						<a href="index.html" style="font-size: 20px;"><img src="/img/logo.png" alt="" />蜗牛影院</a>
					</div>
					<div class="top_right">
						<ul>
							<li><a href="registration.html">注册</a></li>|
							<li class="login">
								<div id="loginContainer"><a href="#" id="loginButton"><span>登陆</span></a>
									<div id="loginBox">
										<form id="loginForm">
											<fieldset id="body">
												<fieldset>
													<label for="email">账号</label>
													<input type="text" name="email" id="email">
												</fieldset>
												<fieldset>
													<label for="password">密码</label>
													<input type="password" name="password" id="password">
												</fieldset>
												<input type="submit" id="login" value="登陆">
												<label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住我</i></label>
											</fieldset>
											<span><a href="#">密码忘记了?</a></span>
										</form>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>
	<div class="head-bann">
		<div class="container">
			<div class="head-nav">
				<span class="menu"> </span>
				<ul class="megamenu skyblue">
					<li><a class="color1" href="index.html">首页</a></li>
					<li class="grid"><a class="color2" href="women.html">影片</a></li>
					<li><a class="color4" href="#">影院</a></li>
					<div class="clearfix"> </div>
				</ul>
			</div>
		</div>
	</div>
	<!-- script-for-nav -->
	<script>
		$("span.menu").click(function() {
			$(".head-nav ul").slideToggle(300, function() {
				// Animation complete.
			});
		});
	</script>
	<!-- script-for-nav -->
	<!-- header -->
	<div class="container">
		<div class="col-md-12 ">
			<div class="order-progress-bar">
				<div class="progress" style="height:2px">
					<div class="progress-bar " role="progressbar" style="width: 60%; ">
					</div>
				</div>
				<div class="step first done">
					<span class="step-num">1</span>
					<!-- <div class="bar"></div> -->
					<span class="step-text">选择座位</span>
				</div>
				<div class="step done">
					<span class="step-num">2</span>
					<!-- <div class="bar"></div> -->
					<span class="step-text">确认订单</span>
				</div>
				<div class="step last ">
					<span class="step-num">3</span>
					<!-- <div class="bar"></div> -->
					<span class="step-text">取票观影</span>
				</div>
			</div>
		</div>
	</div>


	<div class="container">
		<div class="count-down-wrapper col-md-12">
			<div class="col-md-1">
				<div class="count-down">
				</div>
			</div>
			<div class="col-md-11">
				<p class="time-left">
					请在
					<span class="minute"></span>
					分钟
					<span class="second"></span>秒内完成支付
				</p>
				<p class="tip">请您确认您的订单信息，如超时系统将自动释放已选座位。</p>
			</div>
		</div>
		<div class="col-md-12">
			<div class="warning">订单号：623328737163468152</div>
		</div>
		<table class="table table-bordered order-table">
			<thead>
				<tr>
					<th>影片</th>
					<th>时间</th>
					<th>影院</th>
					<th>座位</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="movie-name">[[${order.movie.mname}]]</td>
					<td class="showtime">[[${startTime}]]</td>
					<td class="cinema-name">[[${order.round.cinema.yname}]]</td>
					<td>
						<span class="hall">[[${order.round.movieHall.ytname}]]</span>
						<div class="seats">
							<div id ="seats">
							</div>
							<div>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="right">
			<div class="price-wrapper">
				<span>实际支付 :</span>
				<span class="price">[[${order.oprice}]]</span>
			</div>
			<div>
				<form action="/pay/pay" method="post">
					<input type="hidden" name="orderId" th:value="${order.oid}">
					<button class="pay-btn" >确认支付</button>
				</form>
			</div>
		</div>




		<div class="modal-container" style="display:none">
			<div class="modal">
				<span class="icon"></span>

				<p class="tip">支付超时，该订单已失效，请重新购买</p>

				<div class="ok-btn btn">我知道了</div>
			</div>
		</div>
	</div>



	<!-- footer -->
	<div class="footer">
		<div class="container">
			<p>Copyright &copy; 2015.Company name All rights reserved.</p>
		</div>
	</div>
	<!-- footer -->

</body>
</html>
